//Ajax封装
function ajax(config) {
  // name=张三&age=20
  const o2s = (data) =>
    Object.keys(data)
      .map((item) => `${item}=${data[item]}`)
      .join("&");
  // 解构传入的参数 ，且 给默认值；
  // post参数 默认格式给 表单格式 ；
  let {
    url = "",
    type = "get",
    data = {},
    dataType = "json",
    success = function () {},
    headers = { "Content-Type": "application/x-www-form-urlencoded" },
  } = config;
  let xhr = new XMLHttpRequest();
  if (type === "get") {
    url = url + "?" + o2s(data);
  }
  xhr.open(type, url);
  if (type === "post") {
    for (let key in headers) {
      xhr.setRequestHeader(key, headers[key]);
    }
  }
  if (type === "get") {
    xhr.send();
  } else {
    // 是post方式
    if (headers["Content-Type"] === "application/json") {
      // 发送json数据格式
      xhr.send(JSON.stringify(data));
    } else {
      // 发送表单格式数据
      xhr.send(o2s(data));
    }
  }
  xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
      if (dataType === "json") {
        success(JSON.parse(xhr.responseText));
      } else {
        success(xhr.responseText);
      }
    }
  };
}
//渲染数据库
function renderDom(users) {
  let tbodyEle = document.querySelector("tbody");
  tbodyEle.innerHTML = "";
  users.forEach((item) => {
    let trEle = document.createElement("tr");
    trEle.innerHTML = `<td>${item.username}</td><td>${item.age}</td><td>${item.gender}</td><td class="del">删除</td>`;
    tbodyEle.appendChild(trEle);
    let delBtn = trEle.querySelector(".del");
    delBtn.onclick = function () {
      ajax({
        url: `/deluser`,
        type: "get",
        data: {
          _id: `${item._id}`,
        },
        success: function (res) {
          let { status } = res;
          if (status === 1) {
            ajax({
              url: "/getdata",
              type: "get",
              success: function (res) {
                renderDom(res);
              },
            });
          }
        },
      });
    };
  });
}
